<template>
  <div class="trade">
  	<p >
  		<span><img src="./img/icon-left.png"  @click="$router.back(-1)" />行业类型</span>
  		<span @click="$router.back(-1)">确定</span>
  	</p>
  	<ul>
  		<li v-for="(item,idx) in tradeList" > {{item}}</li>
		<li style="visibility: hidden;"></li>
  	</ul>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
    export default {
        name: "trade",
        data(){
        	return {
        		tradeList:['电力行业','建筑行业','危化品行业','机械行业','工商贸行业'],
        	}
        },
        computed:{
        	...mapState({
        		trade:'trade'
        	})
        },
        methods:{
        	...mapActions([
        		'changeTrade'
        	])
        },
        mounted(){
        	var that = this
        	$('li').click(function(){
        		var trade = $(this).html()
        		that.changeTrade(trade)
        		$(this).addClass('select').siblings().removeClass('select')
        	})
        }
       
    }
</script>

<style scoped lang="less">
  .trade{
    height:100%;
    width:100%;
    background: url(../type-list/img/bg.jpg)no-repeat;
    background-size:100% 100% ;
    p{
    	display: flex;
    	padding:0 1rem;
    	img{
    		display: block;
    		width:1rem;
    		margin-right: 1rem;
    	}
    	justify-content: space-between;
    	span{
    		line-height: 8rem;
    		font-size: 2rem;
    		display: flex;
    		align-items: center;
    		i{
    			font-style: normal;
    			font-size: 30px;
    		}
    	}
    }
    ul{
		width:32rem;
		height:10rem;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
    	li{
    		width:6.8rem;
    		float:left;
    		line-height: 3rem;
			height:3rem;
    		border-radius: 0.5rem;
    		text-align: center;
    		background: #fff;
    		margin-bottom: 1rem;
    		font-size:1.3rem;
    	}
    	
    	.select{
    		background: #6495ED;
    		color:#fff;
    	}
    }
    
  }
</style>
